<template>
    <div class="ctl">
        <div class="search">
            <el-form ref="form" :model="searchParam" label-width="80px" inline>
                <el-form-item label="创建时间">
                    <el-col :span="11">
                        <el-date-picker type="datetime" placeholder="选择日期" v-model="searchParam.startTime" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="datetime" placeholder="选择时间" v-model="searchParam.endTime" style="width: 100%; " format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-col>
                </el-form-item>
                <div class="sub">

                    <el-button type="primary" @click="getLog">查询</el-button>
                    <el-button>取消</el-button>
                </div>

            </el-form>
        </div>
        <div class="dataTable">
            <el-table :data="logList"  border>
                <el-table-column type="index" label="序号" width="120"/>
                <el-table-column  label="IP" width="180" prop="ip"/>
                <el-table-column  label="操作系统" width="180" prop="os"/>
                <el-table-column  label="最后登入时间" width="180" prop="updateAt"/>
                <el-table-column  label="浏览器" width="120" prop="browser"/>
                <el-table-column  label="浏览器版本" width="180" prop="version"/>
                <el-table-column  label="内核" width="120" prop="engineVersion"/>
                <el-table-column  label="地区" width="180" prop="zone"/>
                <el-table-column  label="type" width="180" prop="mobileModel"/>
                <el-table-column  label="标识" width="180" prop="uuid"/>
            </el-table>

            <div class="block">

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page=searchParam.queryPageDTO.currentPage
                        :page-sizes="[10, 50, 100, 200]"
                        :page-size=searchParam.queryPageDTO.pageSize
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="logListSize">
                </el-pagination>
            </div>
        </div>


    </div>
</template>

<script >

    export default {
        data() {
            return {
                searchParam: {
                    cardId: 0,
                    queryPageDTO: {
                        currentPage: 1,
                        pageSize: 10
                    }
                },
                logListSize: null,
                logList: [],

                dialogVisible: false,


            }
        },

        methods: {
            getLog() {
                this.searchParam.cardId = this.id
                this.postRequestJson("/api/tg/log/getInfo", this.searchParam).then(resp => {
                    this.logList = resp.data.data
                    console.log(this.logList)
                    this.logListSize = resp.data.size
                })
            },

            handleSizeChange(val) {
                this.searchParam.queryPageDTO.pageSize = val
                this.getLog()
            },

            handleCurrentChange(val){
                this.searchParam.queryPageDTO.currentPage = val
                this.getLog()
            },
        }
    }
</script>
<style>
    .ctl{
        margin-left: 50px;
    }
    .ctl .search{
        padding: 30px;
        margin-top: 100px;
        border: #d4caca 1px solid;
    }
</style>
